JS基础 | JavaScript 组成部分

前面一篇我们简单介绍了 JavaScipt 的历史，在 JavaScript 发展的前十几年时间，Nodejs 出现以前，JavaScript 主要是用于 Web 开发，也就是俗称网页或网站开发。

早期 JavaScript 只是寄生在浏览器上面的一门脚本语言，离开了浏览器它什么都做不了，还需要浏览器提供的 文档对象模型DOM、浏览器对象模型BOM才能正真的工作起来。

1. 文档对象模型（DOM）

用户需要与网页内容和浏览器窗口互动，浏览器除了呈现内容以外，还提供了一套机制，让开发者能够使用 JavaScript 语言控制网页上的元素（HTML），称之为“文档对象模型（Document Object Model，简称DOM）”。

对于网页开发，可以理解 DOM 是 HTML 文档在内存中的抽象节点树，通过全局对像 document.getElement(s)ByXXX 函数获取 HTML 元素对象，如下图：

通过修改返回的节点对象属性，就能实时改变Web页面的表现，你也可以通过 DOM 提供的其它 API 接口创建、删除 HTML 元素。

总之来说，如果你是想开发网站，设计互动网页，DOM 的学习必不可少，但对于使用 Cocos Creator 做 H5 游戏则不是必须的。

几乎所有的 UI（user interface 用户界面）开发框架，都是使用的抽像树状节点模型，如果你已经了解 DOM 的机制，对于 Cocos Creator 中的场景树、节点理解起来会非常轻松。

2. 浏览器对象模型（BOM）

除了对网页内容的控制，Web 开发人员，还需要使用 JavaScrip 控制 浏览器窗口，例如：

窗口提示 alert

使用 BOM 提供的 alert 函数可以使用浏览器弹出一个提示窗口，代码如下：

alert('欢迎关注「少年奎特尔」微信公众号！')

运行效果：

历史记录 history

使用 history 对象接口，保存了用户浏览网页的历史，使用 history.forward() \ history.back() 与我们点击浏览器的前进后退的作用相同，在浏览器控制台输入下面代码，可以看到效果：

history.forward(); //前进history.back(); //后退

屏幕对象 screen

获取当前浏览器窗口高宽、位置等信息

定位 location

设置 location.href 可以跳转到指定链接，在浏览器控制台输入如下代码跳转链接：

location.href = 'http://www.creator-star.cn';

3. ECMAScript

ECMAScript 是用来标准化 JavaScript 语言的基本语法结构，对于使用 JavaScript 编写游戏来说它才是我们需要掌握的重点，主要有以下内容：

1. 基本语法

2. 内置对象

3. 原型继承

随着 ECMAScript 规范的迭代发展 ECMAScript 6、7 （简称ES6、7），现代化的浏览器已经支持绝大部分ES6、ES7的新语法，同时 Cocos Creator 引擎内置有 Bable 编译器，在构建时会将 ES6、ES7 语法转换为 ES5 语法可兼容旧版本浏览器。虽然运行在目标设备上仍然是 ES5 的代码，但不影响我们使用新版本的语法。

在接下来的教程中，Shawn 将从 ECMAScript 最基础的语法开始讲解，欢迎关注，期待你的加入！

英文专业术语解释

• HTML：全称 Hypertext Markup Language，超文本标记语言

• document：n. 文件；公文；文献；证件；（计算机） 文档

• object：n. 目标；物体；（计算机） 对象

• model：n. 模型；样式

• browser：n. 浏览器；浏览书本的人

• ECMA：全称 European Computer Manufacturers Association，欧洲计算机制造商协会

• script：n. 剧本；电影剧本；（计算机）脚本

• bable：n. 通天塔；这里 Babel指的是一个 JavaScript 编译器

• creator：n. 上帝；造物主；这里指的是 Cocos Creator 游戏引擎

---

「少年奎特尔」公众号专注青少年游戏编程启蒙，通过游戏编程了解计算机与软件开发的一般知识，学习计算机思维，并能将日常的数学 、英语、表达、创意等能力应用于编程实践之中，Shawn 的愿景是：

——让游戏编程成为教育的最强武器！